import React, { Component } from 'react'
import './index.css'
export default class Swipper extends Component {
    state = {
        index:3
    }
    prev(){
        let {index} = this.state;
        index--;
        if(index < 1){
            index = 4
        }
        this.setState({
            index
        })
    }
    next(){
        let {index} = this.state;
        index++;
        if(index > 4){
            index = 1
        }
        this.setState({
            index
        })
    }
    render() {
        let {index} = this.state;
        return (
            <div className="box">
                <img src={require(`../assets/images/${index}.webp`)} alt="" />
                <span onClick={this.prev.bind(this)}> &lt; </span>
                <span className='right' onClick={this.next.bind(this)}> &gt; </span>
            </div>
        )
    }
}
